<template>
  <div class="box">
    <div id="main" ref="main"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import {onMounted, watch} from "vue";
import {usePressureStore} from "../../../store/pressure";


const pressureStore = usePressureStore()


function addChartData() {
  // x轴时间
  let time:Array<string> = []
// 压力高限
  let pressureUp: Array<string> = []
// 当前值 （数据有误需要更改）
  let currentValue: Array<string> = []
// 遍历添加
  pressureStore.chartDataObj.forEach(item => {
    time.push(item.turnoverTime.slice(5))
    pressureUp.push(item.pressure)
    currentValue.push(item.oldPressure)
  })
  return {
    title: {
      text: `${pressureStore.chartDataObj[0].region ? pressureStore.chartDataObj[0].region : '撒拉嘿哟'} `,
      x: 'center',
      y: 'bottom'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        magicType: {type: ['line', 'bar']},
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: time
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '当前值',
        type: 'line',
        data: currentValue,
      },
      {
        name: '压力高限',
        type: 'line',
        data: pressureUp,
      }
    ],
  }
}

onMounted(() => {
  const myCharts = echarts.init(document.getElementById('main') as HTMLDivElement)
  const echartsInit = () => {
    myCharts.setOption(addChartData(), true)
  }
  echartsInit()
  watch(pressureStore, () => {
    if (1) echartsInit()
  }, {deep: true, immediate: true})
})

</script>

<style lang="scss" scoped>
.box {
  margin-left: 10px;
  width: 814px;
  height: 250px;
  border: 5px solid #ebf5ff;
  padding: 10px;

  #main {
    height: 250px;
    width: 100%;
  }
}

</style>